<template>
    <div class="menu_container">
        <div class="menu_list" v-for="(value, prop, index) in menuObject" :key="prop">
            <div class="menu_item" @click="clickNav(index)">
                <i class="iconfont icon-lanmu"></i>
                <div class="menu_title">{{prop}}</div>
                <i
                    class="iconfont icon-xiajiantou"
                    :style="{
                        transform: !isShowArray[index] ? '' : 'rotate(-180deg)'
                    }"
                ></i>
            </div>
            <div
                class="menu_content"
                :style="{
                    maxHeight: isShowArray[index] ? ((Math.ceil(value.length / 4)) * 85) + 'px' : '0px',
                    padding: isShowArray[index] ? '' : '0px 15px',
                }"
            >
                <div
                    class="menu_content_item"
                    v-for="menuItem in value"
                    :key="menuItem.label"
                    :draggable="true"
                    @dragstart="dragstart($event, menuItem, dataList)"
                    @dragend="dragend($event)"
                >
                    <i class="iconfont icon-tupian"></i>
                    <div class="menu_content_item_text">{{menuItem.label}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import deepcopy from "deepcopy";
import { getMenuData } from './menuData.js'
import { events } from '../../utils/events.js';
import { contentRef } from '../contentContainer/content.js';

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => {}
    }
})
const emits = defineEmits(["update:modelValue"])

const dragComponent = ref(null);
let index;

const dragstart = (event, component) => {
    dragComponent.value = component;
    contentRef.value.addEventListener('dragenter', dragenter)
    contentRef.value.addEventListener('dragover', dragover)
    contentRef.value.addEventListener('dragleave', dragleave)
    contentRef.value.addEventListener('drop', drop)
    events.emit('start');
}
const dragend = () => {
    contentRef.value.removeEventListener('dragenter', dragenter)
    contentRef.value.removeEventListener('dragover', dragover)
    contentRef.value.removeEventListener('dragleave', dragleave)
    contentRef.value.removeEventListener('drop', drop)
    events.emit('end');
}

// dragenter 进入元素中，添加一个移动的标识
const dragenter = (e) => {
    e.dataTransfer.dropEffect = "move";
}
// dragover 在目标元素中经过时，必须阻止默认行为
const dragover = (e) => {
    e.preventDefault()
    for(let i = 0; i < props.modelValue.length; i++) {
        if(e.clientY > props.modelValue[i].dom.y) {
            index = i;
        }
    }
}
// dragleave 离开元素的时候，需要增加一个禁用标识
const dragleave = (e) => {
    e.dataTransfer.dropEffect = "none";
}
// drop 松手时，根据拖拽的组件，给编辑区添加一个组件
const drop = () => {
    const newData = deepcopy(props.modelValue)
    newData.splice((index == undefined ? 0 : index + 1), 0, {
        key: dragComponent.value.key,
        id: Math.random().toString(),
        props: dragComponent.value.props,
        focus: false,
    })
    emits("update:modelValue", newData)
}
const { isShowArray, menuObject, clickNav } = getMenuData()
</script>

<style lang="scss" scoped>
.menu_container{
    grid-area: c;
    box-sizing: border-box;
    border-left: 2px solid var(--color-border-root-black);
    background-color: var(--color-bg-root-black);
    overflow-y: scroll;
    width: 100%;

    &::-webkit-scrollbar {
        width: 4px;
    }
    &:hover::-webkit-scrollbar-thumb {
        background-color: #484848;
        border-radius: 8px;
    }

    .menu_list{
        width: 100%;
        .menu_item{
            height: 44px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
            cursor: pointer;
            width: 100%;
            .menu_title{
                flex: 1;
            }
            .icon-lanmu{
                margin: 0 10px 0 15px;
            }
            .icon-xiajiantou{
                transition: all 0.3s;
                margin-right: 10px;
            }
            &:hover{
                background-color: var(--color-bg-one-black);
            }
        }
        .menu_content{
            padding: 10px 15px;
            display: flex;
            flex-wrap: wrap;
            background: var(--color-bg-main-black);
            overflow: hidden;
            transition: all 0.3s;
            .menu_content_item{
                width: 23%;
                height: 50px;
                margin-bottom: 6px;
                padding: 1%;
                font-size: 12px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                transition: all 0.3s;
                user-select: none;
                &:hover{
                    background: var(--color-bg-one-black);
                    border-radius: 4px;
                    cursor: move;
                }

                .icon-tupian{
                    font-size: 28px;
                }
                .menu_content_item_text{
                    width: 100%;
                    text-overflow: ellipisis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>